<div class="wsl-list-item md:space-x-4">
  <div class="wsl-item-heading">
    <div
      class="wsl-item-status"
      [tippy]="meta.icon.tooltip"
      placement="left"
      [delay]="[500, 100]">
      <fa-icon
        [icon]="meta.icon.type"
        [ngStyle]="{ color: meta.icon.color }"></fa-icon>
    </div>
    <div class="wsl-item-title">
      <p [title]="metric.name">
        {{ metric.name }}
      </p>
    </div>
  </div>
  <div class="wsl-item-topics">
    <div
      class="wsl-item-topic"
      *ngIf="meta.changeType === MetricChangeType.Fresh">
      {{ metric.duration() | datetime : 'duration' }} in version
      {{ params.srcBatchName }}
    </div>
    <div
      class="wsl-item-topic"
      *ngIf="meta.changeType === MetricChangeType.Missing">
      {{ metric.duration() | datetime : 'duration' }} in version
      {{ params.dstBatchName }}
    </div>
    <div
      class="wsl-item-topic"
      *ngIf="
        meta.changeType === MetricChangeType.Same ||
        meta.changeType === MetricChangeType.Faster ||
        meta.changeType === MetricChangeType.Slower
      ">
      {{ metric.duration() | datetime : 'duration' }}
    </div>
    <div
      class="wsl-item-topic"
      *ngIf="meta.changeType === MetricChangeType.Same">
      same as in version {{ params.dstBatchName }}
    </div>
    <div
      class="wsl-item-topic"
      *ngIf="meta.changeType === MetricChangeType.Faster">
      <div class="flex items-center space-x-2">
        <ng-icon
          class="wsl-text-success"
          name="featherTrendingDown"
          size="1rem"
          strokeWidth="3" />
        <span class="wsl-text-success">
          -{{ metric.absoluteDifference() | datetime : 'duration' }}
        </span>
        <span>({{ metric.changeDescription() }} faster)</span>
      </div>
    </div>
    <div
      class="wsl-item-topic"
      *ngIf="meta.changeType === MetricChangeType.Slower">
      <div class="flex items-center space-x-2">
        <ng-icon
          class="wsl-text-danger"
          name="featherTrendingUp"
          size="1rem"
          strokeWidth="3" />
        <span class="wsl-text-danger">
          +{{ metric.absoluteDifference() | datetime : 'duration' }}
        </span>
        <span>({{ metric.changeDescription() }} slower)</span>
      </div>
    </div>
  </div>
</div>
